<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>单位管理</title>
    <!-- 引入Vue.js -->
    <script src="../../js/vue.js"></script>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="../../css/index.css">
    <!-- 引入Element UI组件库 -->
    <script src="../../js/index.js"></script>
    <!-- 引入axios -->
    <script src="../../js/axios.min.js"></script>
    <style>
        .el-table .el-table__fixed-right {
            height: 100% !important;
        }
        .search-form .el-form-item {
            margin-bottom: 10px;
        }
        .unit-badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 4px;
            background-color: #409EFF;
            color: white;
            font-size: 12px;
            margin-right: 5px;
        }
    </style>
</head>
<body>
<div id="app" class="app1">
    <!-- 搜索区域 -->
    <el-form :model="searchForm" :inline="true" class="search-form">
        <el-form-item label="单位名称">
            <el-input size="mini" v-model="searchForm.unitName" placeholder="请输入单位名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="单位编码">
            <el-input size="mini" v-model="searchForm.unitCode" placeholder="请输入单位编码" clearable></el-input>
        </el-form-item>
        <el-form-item label="状态">
            <el-select v-model="searchForm.status" placeholder="请选择状态" size="mini" clearable>
                <el-option label="正常" value="0"></el-option>
                <el-option label="停用" value="1"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button size="mini" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button size="mini" @click="resetSearch">重置</el-button>
            <el-button size="mini" type="primary" @click="handleAdd">添加单位</el-button>
        </el-form-item>
    </el-form>

    <!-- 单位列表 -->
    <el-table :data="tableData" style="width: 100%" border height="500">
        <el-table-column prop="unitId" label="单位ID" width="100"></el-table-column>
        <el-table-column prop="unitName" label="单位名称" width="150">
            <template slot-scope="scope">
                <span>{{ scope.row.unitName }}</span>
                <span v-if="scope.row.unitCode" class="unit-badge">{{ scope.row.unitCode }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="unitCode" label="单位编码" width="120"></el-table-column>
        <el-table-column prop="status" label="状态" width="80">
            <template slot-scope="scope">
                <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">
                    {{ scope.row.status === '0' ? '正常' : '停用' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="delFlag" label="删除标志" width="100">
            <template slot-scope="scope">
                <el-tag :type="scope.row.delFlag === '0' ? 'success' : 'danger'">
                    {{ scope.row.delFlag === '0' ? '存在' : '删除' }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="createBy" label="创建者" width="100"></el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="160">
            <template slot-scope="scope">
                {{ scope.row.createTime ? formatDateTime(scope.row.createTime) : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="updateBy" label="更新者" width="100"></el-table-column>
        <el-table-column prop="updateTime" label="更新时间" width="160">
            <template slot-scope="scope">
                {{ scope.row.updateTime ? formatDateTime(scope.row.updateTime) : '' }}
            </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="120"></el-table-column>
        <el-table-column label="操作" width="180" fixed="right">
            <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!-- 添加/编辑对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="600px">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
            <el-form-item label="单位名称" prop="unitName">
                <el-input v-model="form.unitName" autocomplete="off" placeholder="请输入单位名称，如：千克、箱、袋等"></el-input>
            </el-form-item>

            <el-form-item label="单位编码" prop="unitCode">
                <el-input v-model="form.unitCode" autocomplete="off" placeholder="请输入单位编码，如：kg、box、bag等"></el-input>
            </el-form-item>

            <el-form-item label="状态" prop="status">
                <el-radio-group v-model="form.status">
                    <el-radio label="0">正常</el-radio>
                    <el-radio label="1">停用</el-radio>
                </el-radio-group>
            </el-form-item>

            <el-form-item label="备注" prop="remark">
                <el-input type="textarea" v-model="form.remark" :rows="3" placeholder="请输入备注信息"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button @click="resetForm('form')">重置</el-button>
            <el-button type="primary" @click="submitForm('form')">确 定</el-button>
        </div>
    </el-dialog>
</div>

<script>
    new Vue({
        el: '#app',
        data() {
            return {
                tableData: [], // 表格数据
                currentPage: 1, // 当前页码
                pageSize: 10, // 每页显示的条数
                total: 0, // 分页数据的总数
                searchForm: {
                    unitName: '',
                    unitCode: '',
                    status: ''
                }, // 搜索条件
                title: '添加单位', // 对话框标题
                dialogFormVisible: false, // 对话框是否可见
                form: {
                    unitId: '',
                    unitName: '',
                    unitCode: '',
                    status: '0',
                    delFlag: '0',
                    createBy: '',
                    createTime: '',
                    updateBy: '',
                    updateTime: '',
                    remark: ''
                },
                rules: {
                    unitName: [
                        { required: true, message: '请输入单位名称', trigger: 'blur' },
                        { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
                    ],
                    unitCode: [
                        { required: true, message: '请输入单位编码', trigger: 'blur' },
                        { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                    ],
                    status: [
                        { required: true, message: '请选择状态', trigger: 'change' }
                    ]
                }
            }
        },
        created() {
            this.loadData();
        },
        methods: {
            // 加载单位数据
            loadData() {
                let _this = this;
                axios.post('/vegetablemarketexpress/unit/queryByPage', {
                    "pageNo": this.currentPage,
                    "pageSize": this.pageSize,
                    "data": this.searchForm
                }).then(function(response) {
                    if (response.data.code==200) {
                        _this.tableData = response.data.data.list;
                        _this.total = response.data.data.total;
                    }
                }).catch(function(error) {
                    console.log(error);
                    _this.$message.error('数据加载失败');
                });
            },

            // 格式化日期时间
            formatDateTime(dateTime) {
                if (!dateTime) return '';
                if (typeof dateTime === 'string') {
                    return dateTime.replace('T', ' ').substring(0, 19);
                }
                return dateTime;
            },

            // 每页显示条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.currentPage = 1;
                this.loadData();
            },

            // 当前页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },

            // 搜索
            search() {
                this.currentPage = 1;
                this.loadData();
            },

            // 重置搜索条件
            resetSearch() {
                this.searchForm = {
                    unitName: '',
                    unitCode: '',
                    status: ''
                };
                this.currentPage = 1;
                this.loadData();
            },

            // 提交表单
            submitForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let url = '/vegetablemarketexpress/unit/add';
                        let successMsg = '添加成功';

                        if (this.title === '修改单位') {
                            url = '/vegetablemarketexpress/unit/update';
                            successMsg = '修改成功';
                        }

                        let _this = this;
                        axios.post(url, this.form)
                            .then(function(response) {
                                if (response.data.code==200) {
                                    _this.$message({
                                        message: successMsg,
                                        type: 'success'
                                    });
                                    _this.loadData();
                                    _this.dialogFormVisible = false;
                                } else {
                                    _this.$message.error('操作失败');
                                }
                            })
                            .catch(function(error) {
                                console.log(error);
                                _this.$message.error('操作异常');
                            });
                    } else {
                        this.$message.error('表单验证失败');
                        return false;
                    }
                });
            },

            // 重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            // 处理添加
            handleAdd() {
                this.dialogFormVisible = true;
                this.title = "添加单位";
                this.form = {
                    unitId: '',
                    unitName: '',
                    unitCode: '',
                    status: '0',
                    delFlag: '0',
                    createBy: '',
                    createTime: '',
                    updateBy: '',
                    updateTime: '',
                    remark: ''
                };
            },

            // 处理编辑
            handleEdit(index, row) {
                this.dialogFormVisible = true;
                this.title = "修改单位";
                this.form = Object.assign({}, row);
            },

            // 处理删除
            handleDelete(index, row) {
                this.$confirm('此操作将删除该单位, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let _this = this;
                    axios.delete('/vegetablemarketexpress/unit/deleteByUnitId?unitId=' + row.unitId)
                        .then(function(response) {
                            if (response.data.code==200) {
                                _this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                _this.loadData();
                            } else {
                                _this.$message.error('删除失败');
                            }
                        })
                        .catch(function(error) {
                            console.log(error);
                            _this.$message.error('删除异常');
                        });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        }
    });
</script>
</body>
</html>